import React, { Component, Fragment } from 'react'
import { Modal } from 'antd'

export default class BookDetail extends Component {
  constructor(props) {
    super(props)
    this.state = {
      visible: false,
      //缓存查看书籍详情
      bookDetail: Object
    }
  }
  showModal = bookDetail => {
    this.setState({
      bookDetail,
      visible: true
    })
  }

  handleCancel = e => {
    console.log(e)
    this.setState({
      visible: false
    })
  }
  render() {
    const {
      author,
      bookName,
      collectNum,
      borrowNum,
      classify,
      tags,
      inventory,
      bookPress,
      bookVersion,
      userId,
      uploadDate
    } = this.state.bookDetail
    return (
      <Fragment>
        <div />
        <Modal
          className="detail-wrap"
          title={`《${bookName}》`}
          visible={this.state.visible}
          onOk={this.handleCancel}
          onCancel={this.handleCancel}
          cancelText="关闭"
          okText="确定"
        >
          <p>书名:&nbsp;&nbsp;{bookName}</p>
          <p>作者:&nbsp;&nbsp;{author}</p>
          <p>版本号:&nbsp;&nbsp;{bookVersion}</p>
          <p>出版社:&nbsp;&nbsp;{bookPress}</p>
          <p>库存:&nbsp;&nbsp;{inventory}</p>
          <p>被收藏次数:&nbsp;&nbsp;{collectNum}</p>
          <p>被借阅次数:&nbsp;&nbsp;{borrowNum}</p>
          <p>类别:&nbsp;&nbsp;{classify}</p>
          <p>标签:&nbsp;&nbsp;{tags}</p>
          <p>书主Id:&nbsp;&nbsp;{userId}</p>
          <p>上架日期:&nbsp;&nbsp;{uploadDate}</p>
        </Modal>
      </Fragment>
    )
  }
}
